import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select
  } from 'antd'
  import { PlusOutlined } from '@ant-design/icons'
  import { Link, useSearchParams } from 'react-router-dom'
  import './index.scss'
  import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
//import {request} from '@/utils'
import {message} from 'antd'
import { createArticleAPI,getArticleById,updateArticleAPI} from '@/apis/article'
import {useRef} from 'react'
import { useChannel } from '@/hooks/useChannel'
  const { Option } = Select
  
  const Publish = () => {
    // 回填数据
  const [searchParams] = useSearchParams()
  const articleId = searchParams.get('id')
  // 获取实例
  const [form] = Form.useForm()

  useEffect(() => {
    // 1. 通过id获取数据
    async function getArticleDetail () {
      const res = await getArticleById(articleId)
      const data = res.data
      const { cover } = data
      form.setFieldsValue({
        ...data,
        type: cover.type
      })
  //    console.log('data',data)
      // 为什么现在的写法无法回填封面？
      // 数据结构的问题  set方法 -> { type: 3 }   { cover: { type: 3}}

      // 回填图片列表
      setImageType(cover.type)
      // 显示图片({url:url})
      setImageList(cover.images.map(url => {
        return { url }
      }))
    }
    // 只有有id的时候才能调用此函数回填
    if (articleId) {
      getArticleDetail()
    }
    // 2. 调用实例方法 完成回填
  }, [articleId, form])


      // 获取频道列表
  const { channelList } = useChannel()

    //暂存图片
    const cacheImageList = useRef([])
          // 上传回调
  const [imageList, setImageList] = useState([])
  const onChange = (value) => {
  //  console.log('正在上传中', value)
    setImageList(value.fileList)
   
    cacheImageList.current = value.fileList
    console.log('cacheImageList',cacheImageList)
  }
    const onFinish= async (formValue)=>{
        if (imageType !== imageList.length) return message.warning('图片类型和数量不一致')

const { channel_id, content, title } = formValue

const reqData = {
    channel_id,
    content,
    title,
    type: imageType,
    cover: {
      type: imageType,  
      images: imageList.map(item => {
        if (item.response) {
          return item.response.data.url
        } else {
          return item.url
        }
      }) // 图片列表
    }
  }


   // 2. 调用接口提交
    // 处理调用不同的接口 新增 - 新增接口  编辑状态 - 更新接口  id
    if (articleId) {
      // 更新接口
      updateArticleAPI({ ...reqData, id: articleId })
      message.success('编辑文章成功')
    } else {
      await createArticleAPI(reqData)
      message.success('发布文章成功')
    }
    }

  const [imageType, setImageType] = useState(0)

  const onTypeChange =async (e) => {
   // const type = e.target.value
    setImageType(e.target.value)
    // if (type === 1) {
    //     // 单图，截取第一张展示
    //     const  imgList = await(cacheImageList.current[0] ? [cacheImageList.current[0]] : [])
    //     setImageList(imgList)
    //     console.log(111,imgList)
    //   } else if (type === 3) {
    //     // 三图，取所有图片展示
    //     setImageList(cacheImageList.current)
    //     console.log(999,cacheImageList.current)
    //   }else{
    //     setImageList([]) 
    //   }
  }
    return (
      <div className="publish">
        <Card
          title={
            <Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
            
              { title: `${articleId ? '编辑' : '发布'}文章` },
            ]}
            />
          }
        >
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ type: imageType }}
            onFinish={onFinish}
            form={form}
          >
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择文章频道' }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              
                {channelList.map(item=>  <Option key={item.id} value={item.id}>   {item.name}</Option>)}
              </Select>
            </Form.Item>
            <Form.Item label="封面">
  <Form.Item name="type">
    <Radio.Group onChange={onTypeChange}> 
      <Radio value={1}>单图</Radio>
      <Radio value={3}>三图</Radio>
      <Radio value={0}>无图</Radio>
    </Radio.Group>
  </Form.Item>
  {imageType > 0 &&
  <Upload
  name="image"
  listType="picture-card"
  showUploadList
  action={'http://geek.itheima.net/v1_0/upload'}
  onChange={onChange}
  maxCount={imageType}
  fileList={imageList.slice(0, imageType)} //根据imageType显示文件列表的一部分 ⭐⭐
  multiple={imageType > 1}
>
  <div style={{ marginTop: 8 }}>
    <PlusOutlined />
  </div>
</Upload>
  }
  
</Form.Item>

            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
                  <ReactQuill
          className="publish-quill"
          theme="snow"
          placeholder="请输入文章内容"
        />
            </Form.Item>
  
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit">
                  发布文章
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
  
  export default Publish